<template>
  <view>
    <view class="cart-box"
          v-if="cartListTotal">
      <!-- 地址区域 -->
      <my-address :address-data="addressData"
                  @select-address="addressSelect">
      </my-address>

      <!-- 标题区域 -->
      <view class="title-box">
        <uni-icons class="title-icon"
                   type="shop">
        </uni-icons>
        <view class="title">购物车</view>
      </view>

      <!-- 购物车主体 -->
      <uni-swipe-action class="cart-list-box">
        <uni-swipe-action-item v-for="(good,index) in cartList"
                               :key="good.goods_id"
                               :right-options="swipeActionBtnOptions"
                               @click="swipeActionBtnClick($event, good)">
          <my-good-item :goodData="good"
                        show-radio
                        show-number-box
                        @radio-change="goodDataChange"
                        @number-change="goodDataChange">
          </my-good-item>
        </uni-swipe-action-item>
      </uni-swipe-action>

      <!-- 结算区域 -->
      <my-settle></my-settle>
    </view>

    <!-- 购物车为空时显示 -->
    <view class="empty-cart"
          v-else>
      <view class="empty-img">
        空
      </view>
      <view class="empty-text">空空如也</view>
    </view>

  </view>
</template>

<script>
  import { mapState, mapMutations, mapGetters } from 'vuex'
  import badgeMixin from '@/mixins/tabbar-badge.js'

  export default {
    mixins: [badgeMixin],
    data() {
      return {
        swipeActionBtnOptions: [{
          text: '删除',
          key: 'delete',
          style: {
            backgroundColor: '#c00000'
          }
        }]
      }
    },
    computed: {
      ...mapState('m_cart', ['cartList']),
      ...mapState('m_user', ['addressData']),
      ...mapGetters('m_cart', ['cartListTotal'])
    },
    methods: {
      ...mapMutations('m_cart', ['updateCartListItem', 'deleteCartListItem']),
      ...mapMutations('m_user', ['setAddressData']),
      // 商品项值(是否勾选，填写数量)改变事件
      goodDataChange(good) {
        // 更新购物车中变化的商品
        this.updateCartListItem(good)
      },
      /**
       * 滑动按钮组件按钮点击事件
       * @param {Object} e 触发事件
       * @param {Object} good 商品数据
       */
      swipeActionBtnClick({ content }, good) {
        switch (content.key) {
          // 删除按钮点击
          case 'delete':
            this.deleteCartListItem(good)
            break
        }
      },
      addressSelect() {
        // #ifdef MP
        let that = this
        // 调用小程序原生功能
        uni.chooseAddress({
          success(address) {
            // 设置选中的收货地址
            that.setAddressData({
              name: address.userName,
              telephone: address.telNumber,
              address: address.provinceName + address.cityName + address.countyName + address.detailInfo
            })
          }
        })
        // #endif
      }
    }
  }
</script>

<style lang="scss">
  .title-box {
    height: 60rpx;
    border-bottom: 1px solid #efefef;
    padding-left: 14rpx;
    display: flex;
    justify-content: flex-start;
    align-items: center;

    .title-icon {
      font-size: 32rpx !important;
    }

    .title {
      margin-left: 20rpx;
      font-size: 28rpx;
    }
  }

  .cart-list-box {
    padding-bottom: 100rpx;
  }

  .empty-cart {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;

    .empty-img {
      width: 250rpx;
      height: 250rpx;
      border-radius: 50%;
      font-size: 150rpx;
      line-height: 250rpx;
      text-align: center;
      background-color: #f3da1f;
    }

    .empty-text {
      padding-top: 26rpx;
      font-size: 34rpx;
      color: gray;
    }
  }
</style>
